<template>
    <div class="login_book" >
        <div class="login_account">我的账户</div>
        <div class="login_welcome">欢迎</div>
        <div class="login_text">请在此管理您的个人资料并查阅会籍级别状况、奖励和所购产品。</div>
        <div class="existing_account">我已有在线帐户</div>
        <div style="margin-top:30px;">
            <div  style="padding-top: 10px">
                <div style="text-align: left;padding-left: 200px">
                    <span style="color: red">*</span>账号:
                </div>
                <div style="text-align: left;padding-left: 200px">
                    <el-input v-model="username" placeholder="请输入账号" class="login_user" id="login_user"></el-input>
                    <span v-if="checkUsername===0" style="color: red"><i class="el-icon-error" style="color: red"></i>请输入账号！</span>
                    <span v-else-if="checkUsername===1"><i class="el-icon-success" style="color: green;"></i></span>
                    <span v-else></span>
                </div>
            </div>
            <div style="margin-top: 10px">
                <div style="text-align: left;padding-left: 200px"><span style="color: red">*</span>密码:</div>
                <div style="text-align: left;padding-left: 200px">
                    <el-input v-model="password" placeholder="请输入密码" class="login_paw" id="login_pas" show-password></el-input>
                    <span v-if="checkPassword===0" style="color: red"><i class="el-icon-error" ></i>请输入密码！</span>
                    <span v-else-if="checkPassword===1"><i class="el-icon-success" style="color: green;"></i></span>
                    <span v-else></span>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;text-align: center" @click.once="loginCheck"><el-radio-button class="login_button" >登录</el-radio-button></div>
        <div class="login_regis">还不是 Swarovski Club 的会员?<a href="http://localhost:8080/#/registered">请在此注册</a></div>
    </div>
</template>

<script>
  import {loginApi} from '@/api/hxl_port/import'
    export default {
        name: "Login",
        data(){
            return{
                username:'',
                password:'',
                checkUsername:3,
                checkPassword:3,
                key:''
            }
        },
        methods:{
          go(){
            this.$router.push({
              path:'/',
                query:{"zero":'zero'}
            })
          },
            loginCheck(){
                if (this.username){
                    this.checkUsername = 1;
                    document.getElementById('login_user').style.border = "1px solid #dcdfe6";
                    if (this.password){
                        this.checkPassword = 1;
                        document.getElementById('login_pas').style.border = "1px solid #dcdfe6";
                        loginApi(this.username,this.password).then(req=>{

                          if (req.data){
                              console.log(req.data);
                            this.$message({type:'success',message:'欢迎回来'});
                            let value = req.data.username;
                            let account = this.username;
                            sessionStorage.setItem('key', value);
                            sessionStorage.setItem('account', account);
                            // 从sessionStorage获取数据
                            this.key = sessionStorage.getItem('key');
                            this.go()
                          }
                          else{
                          this.$message({type:'error',message:'账号或密码错误'})
                          }
                        })

                    }else {
                        this.checkPassword = 0;
                        document.getElementById('login_pas').style.border = "1px solid red";
                    }
                }else {
                    this.checkUsername = 0;
                    document.getElementById('login_user').style.border = "1px solid red";
                }
            }
        },



    }
</script>

<style lang="scss" scoped>
    .login_book{
        width: 800px;
        height: 500px;
        margin: 0 auto;
    .login_account{
        text-align: center;
        font-size: 38px;
        margin-top: 30px;
    }
    .login_welcome{
        text-align: center;
        font-size: 20px;
        margin-top: 10px;
    }
    .login_text{
        text-align: center;
        font-size: 16px;
        margin-top: 10px;
    }
    .existing_account{
        text-align: center;
        font-size: 16px;
        margin-top: 10px;
    }
    .login_button{
        /deep/.el-radio-button__inner{
            background-color: black !important;
        }
    }
    .login_regis{
        margin-top: 10px;
        text-align: center;
    }
    .login_user{
        width: 400px;
    }
    .login_paw{
        width: 400px;
    }
    }
</style>
